class Snake{
  // 表示蛇的头部
  head:HTMLElement;
  // 表示蛇的身体
  bodies:HTMLCollection;
  // 获取蛇的容器
  element:HTMLElement;
  constructor(){
    this.element = document.querySelector('#snake')!;
    this.head = document.querySelector('#snake > div') as HTMLElement;
    this.bodies = this.element.getElementsByTagName('div');
  }

  // 获取蛇的x坐标
  get X(){
    return this.head.offsetLeft;
  }
  // 获取蛇的y坐标
  get Y(){
    return this.head.offsetTop;
  }

  //设置蛇头的坐标
  set X(val:number){
    if(this.X === val){
      return;
    }
     if(val < 0 || val > 290){
      throw new Error('蛇撞墙了~！');
    }
    if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft ===  val){
      if(val > this.X){
        val = this.X -10;
      }else{
        val = this.X + 10;
      }
    }
    this.moveBody();
    this.head.style.left = val + 'px'
  this.checkHeadSnake()
  }
  set Y(val:number){
      if(this.Y === val){
      return;
    }
    if(val < 0 || val > 290){
      throw new Error('蛇撞墙了~！');
    }
    if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop ===  val){
      if(val > this.Y){
        val = this.Y -10;
      }else{
        val = this.Y + 10;
      }
    }
    this.moveBody();
    this.head.style.top = val + 'px';
    this.checkHeadSnake()
  }
  // 蛇增加身体的方法
  addBody(){
    this.element.insertAdjacentHTML('beforeend','<div></div>');
  }
  // 移动身体
  moveBody(){
    for(let i=this.bodies.length-1;i>0;i--){
      let X = (this.bodies[i-1] as HTMLElement).offsetLeft;
      let Y = (this.bodies[i-1] as HTMLElement).offsetTop;
      (this.bodies[i] as HTMLElement).style.left = X + 'px';
      (this.bodies[i] as HTMLElement).style.top = Y + 'px';
    }
  }
  // 检查蛇头是否与身体相撞
  checkHeadSnake(){
    for(let i = 1;i < this.bodies.length; i++){
      let bd = this.bodies[i] as HTMLElement;
      if(this.X === bd.offsetLeft && this.Y === bd.offsetTop){
        throw new Error('撞到自己了~！')
      }
    }
  }
  // 重置蛇的位置
  reSnake(){
    for(let i=this.bodies.length-1;i>0;i--){
      let bd = this.bodies[i] as HTMLElement;
      bd.remove();
    }
    this.X = 0;
    this.Y = 0;
  }
}
export default Snake;